<script setup>
  import { ref, reactive, computed } from 'vue';
  import { useBreadcrumbData } from '@/stores/breadcrumb'
  import { doPost } from '@/http/api'
  import { ElMessageBox } from 'element-plus'
  import { genFileId } from 'element-plus'
  import dayjs from 'dayjs'
  
  // 面包屑数据
  const breadcrumbList = ref([
    {
      name: '首页',
      routeName: 'homeData'
    },
    {
      name: '时间戳转换',
      routeName: ''
    },
  ]);

  const breadcrumbDataStore = useBreadcrumbData();
  breadcrumbDataStore.setBreadcrumbData(breadcrumbList);


  const form = reactive({
    timestamp: 1650000000001,
    date: ''
  })



  const onSubmit = () => {
    const timestamp = form.timestamp;

    if(timestamp.toString().length == 13){
      form.date = dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss SSS");
    }else{
      form.date = dayjs.unix(timestamp).format("YYYY-MM-DD HH:mm:ss");
    }

  }
</script>

<template>
  <main class="main">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="时间戳">
        <el-input type="number" v-model.number="form.timestamp" placeholder="请输入时间戳"/>
      </el-form-item>
      <el-form-item label="转换后日期">
        <el-input v-model="form.date" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">转换</el-button>
      </el-form-item>
    </el-form>
  </main>
</template>
